<template>
  <div>
    <a-table
      :columns="columns"
      :rowKey="(record) => record.id"
      :dataSource="bestList"
      :pagination="false"
      :loading="loading">
      <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
      <span slot="typeName" slot-scope="text">
        <ellipsis :length="8" tooltip>{{ text }}</ellipsis>
      </span>
      <span slot="rate" slot-scope="text">
        <a-progress :percent="text" size="small" />
      </span>
      <span slot="weekRate" slot-scope="text">
        <trend :flag="parseFloat(text) <= 0? 'down' : 'up'" style="margin-right: 0px;">
          {{ text }}%
        </trend>
      </span>
    </a-table>
  </div>
</template>

<script>
import { Trend, Ellipsis } from '@/components'
export default {
  name: 'BestTable',
  props: ['bestList', 'loadTable'],
  components: {
    Trend,
    Ellipsis
  },
  watch: {
    loadTable: function (val) {
      this.loading = true
      if (this.bestList && this.bestList.length !== 0) {
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } else {
        setTimeout(() => {
          this.loading = false
        }, 1000)
      }
    }
  },
  mounted () {
    if (this.bestList && this.bestList.length !== 0) {
      this.loading = false
    } else {
      this.loading = false
    }
  },
  data () {
    return {
      loading: false,
      // 表头
      columns: [
        {
          title: '排名',
          dataIndex: 'serial',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '类型',
          dataIndex: 'typeName',
          scopedSlots: { customRender: 'typeName' }
        },
        {
          title: '占比',
          dataIndex: 'rate',
          scopedSlots: { customRender: 'rate' }
        },
        {
          title: '周环比',
          dataIndex: 'weekRate',
          scopedSlots: { customRender: 'weekRate' }
        }
      ]
    }
  },
  methods: {
  }
}
</script>
